<template>
  <div class="rollmove">
    <van-swipe :autoplay="2000"
    >
      <van-swipe-item v-for="(image, index) in images" :key="index">
        <img v-lazy="image" />
      </van-swipe-item>
    </van-swipe>
    <div class="home-quick">
      <div class="quick__wrap">
        <div class="quick_box">
          <img
            src=""
            alt=""
          />

          <p>体检预约</p>
        </div>
        <div class="quick_box">
          <img
            src=""
            alt=""
          />
          <p>报告查询</p>
        </div>
        <div class="quick_box">
          <img
            src=""
            alt=""
          />
          <p>热卖套餐</p>
        </div>
        <div class="quick_box">
          <img
            src=""
            alt=""
          />
          <p>企业团检</p>
        </div>
      </div>
    </div>
    <div class="home-warp__recommend">
      <div class="home-recommend">
        <div class="home-recommend__content">
          <div class="main-title">
            <p>健康守护</p>
          </div>
          <div class="subtitle">
            <span class="subtitle__title">关爱生命 守护健康</span>
            <span class="subtitle__more">
              <a href="https://mall.ikang.com/special/110" target="_blank"
                >查看全部</a
              >
            </span>
          </div>
          <div class="imgarr__wrap">
            <div class="imgarr__left">
              <div class="imgarr__left__top">
                <a href="https://mall.ikang.com/tjMarket">
                  <img
                    src="https://static-upyunmall.health.ikang.com/image/banner/20210406/7bd242d97415406f8776bb6d77539931.jpg"
                    alt=""
                  />
                </a>
              </div>
              <div class="imgarr__left__bottom">
                <img
                  src="https://static-upyunmall.health.ikang.com/image/banner/20210513/3494eb81bf814b35ba3cd9b685f62e2a.jpg"
                  alt=""
                />
              </div>
            </div>
            <div class="imgarr__right">
              <div class="imgarr__right__box">
                <img
                  src="https://static-upyunmall.health.ikang.com/image/banner/20200723/e91456a1829a4202862688cfd538e1b5.jpg"
                  alt=""
                />
              </div>
              <div class="imgarr__right__box">
                <img
                  src="https://static-upyunmall.health.ikang.com/image/banner/20201218/9aa41bed499c4fb68098c101edc81af2.jpg"
                  alt=""
                />
              </div>
              <div class="imgarr__right__box">
                <img
                  src="https://static-upyunmall.health.ikang.com/image/banner/20201218/ee1c1af11c3d443dbbc1f1285e8238d6.jpg"
                  alt=""
                />
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="home-warp__recommend">
      <div class="home-recommend mobile">
        <div class="home-recommend__content">
          <div class="main-title">
            <p>职场精选</p>
          </div>
          <div class="subtitle">
              <span class="subtitle__title">中青年抗压体检套餐</span>
              <span class="subtitle__more"></span>
          </div>
          <div class="content">
            <div class="guidance-hart">
              <a
                href="https://mall.ikang.com/special/139"
                target="_blank"
                ><img
                  src="https://static-upyunmall.health.ikang.com/image/banner/20210420/3658f027e63e44b89bd497945495d720.jpg!/format/webp"
              /></a>
            </div>
            <div class="detail-box">
              <div class="detail-img">
                <img
                  src="https://static-upyunmall.health.ikang.com/image/banner/20201218/3b0eadf4ce254f59945027a8bede8e22.jpg"
                  alt=""
                />
              </div>
              <div class="detail-img">
                <img
                  src="https://static-upyunmall.health.ikang.com/image/banner/20201218/73a030298c164c01bfbc3999ceb88beb.jpg"
                  alt=""
                />
              </div>
              <div class="detail-img">
                <img
                  src="https://static-upyunmall.health.ikang.com/image/banner/20210106/b779958f0daf49d997ec4ab426b3c34c.jpg"
                  alt=""
                />
              </div>
              <div class="detail-img">
                <img
                  src="https://static-upyunmall.health.ikang.com/image/banner/20210106/53c291c8ad224716b64d4185473941d1.jpg"
                  alt=""
                />
              </div>
            </div>
          </div>
        </div>
        <div class="home-recommend__content">
          <div class="main-title">
            <p>健康好物</p>
          </div>
          <div class="subtitle">
            <span class="subtitle__title"
              >爱康严选健康产品</span
            ><span class="subtitle__more"><!----></span>
          </div>
          <div class="content">
            <div class="guidance-hart">
              <a
                href="https://mall.ikang.com/special/80"
                target="_blank"
                ><img
                  src="https://static-upyunmall.health.ikang.com/image/banner/20200807/25fd922fb8c14e7cb276d6a5f764d927.jpg!/format/webp"
              /></a>
            </div>
            <div class="detail-box">
              <div class="detail-img">
                <img
                  src="https://static-upyunmall.health.ikang.com/image/banner/20210421/5b4f3e1138f74e2daba20f20ef2e2a55.jpg"
                  alt=""
                />
              </div>
              <div class="detail-img">
                <img
                  src="https://static-upyunmall.health.ikang.com/image/banner/20210421/5e5352fe4065421a886c1db78734bcf4.jpg"
                  alt=""
                />
              </div>
              <div class="detail-img">
                <img
                  src="https://static-upyunmall.health.ikang.com/image/banner/20210421/5bf8c3a7cd824fb098554f704bef8798.jpg"
                  alt=""
                />
              </div>
              <div class="detail-img">
                <img
                  src="https://static-upyunmall.health.ikang.com/image/banner/20210421/5d64a45df3b24f82bfff20450661f799.jpg"
                  alt=""
                />
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="home-warp__recommend">
      <div class="home-recommend">
        <div class="home-recommend__content">
          <div class="main-title">
            <p style="font-weight:bold">企业团建</p>
          </div>
          <div class="subtitle">
            <span class="subtitle__title">打造企业专属健康福利体检</span>
            <span class="subtitle__more">
              <a href="https://mall.ikang.com/special/110" target="_blank"
                >查看更多</a
              >
            </span>
          </div>
          <van-swipe :autoplay="2000">
            <van-swipe-item v-for="(image, index) in oneimages" :key="index">
            <img v-lazy="image" />
            </van-swipe-item>
          </van-swipe>
      </div>
    </div>
    </div>
    <Foot></Foot>              
  </div>
</template>

<script>
import Foot from './foot.vue'
import Vue from "vue";
import { Lazyload } from "vant";
import { Swipe, SwipeItem } from "vant";
Vue.use(Swipe);
Vue.use(SwipeItem);
Vue.use(Lazyload);
export default {
  data() {
    return {
      images: [
        "https://static-upyunmall.health.ikang.com/image/banner/20210525/95fc653a45b94061a90dda0213cc3173.jpg!/format/webp",
        "https://static-upyunmall.health.ikang.com/image/banner/20210507/8c71c8b4f8fb40d192f6b4733be59337.jpg!/format/webp",
        "https://static-upyunmall.health.ikang.com/image/banner/20200722/a6e1aadaa6d64eb9b12ca205ff808d04.jpg!/format/webp",
        "https://static-upyunmall.health.ikang.com/image/banner/20201231/b0a3c9d020f748b08e7f5193a03fe6ff.jpg!/format/webp",
        "https://static-upyunmall.health.ikang.com/image/banner/20201225/ed4d29d571af4ac0812d8ee6425d4088.jpg!/format/webp",
        "https://static-upyunmall.health.ikang.com/image/banner/20210601/95a651dc733349639bca1ec1564056b9.jpg!/format/webp",
      ],
      oneimages:[
          "https://static-upyunmall.health.ikang.com/image/banner/20200723/90d645715b314a23b021b445e7855542.jpg!/format/webp",
          "https://static-upyunmall.health.ikang.com/image/banner/20200723/91be56ea4b33447688f5cc495b686456.jpg!/format/webp",
          "https://static-upyunmall.health.ikang.com/image/banner/20200723/72be1a0b480048f9995449a2fb9bd1c1.jpg!/format/webp",
      ]
    };
  },
  components:{
      Foot
  }
};
</script>

<style lang='stylus' scoped>
@import '../../../assets/border.styl'
.rollmove 
  height 100%
  overflow-y scroll
  .home-quick 
    height 1.182rem
    .quick__wrap 
      display flex
      justify-content space-around
      padding-top 0.22rem
      .quick_box 
        width 100%
        text-align center
        img 
          width 0.5298rem
        p 
          font-size 0.15454rem
          color #494644
          margin-top 0.07rem
  .home-warp__recommend 
    width 100%
    .home-recommend 
      width 100%
      .home-recommend__content 
        width 100%
        padding 0 0.1656rem 0.14697rem 0.1656rem
        .main-title 
          width 100%
          p 
            width 100%
            font-size 0.253918rem
            font-weight 500
            color #333
            line-height 0.34rem
        .subtitle 
          display flex
          justify-content space-between
          width 100%
          margin 0.07728rem 0 0.110401rem 0
          .subtitle__title 
            color #999
            font-size 0.13248rem
            font-weight 400
          .subtitle__more 
            color #666
            font-size 0.13248rem
            font-weight 500
            a 
              color: #333;
              font-size: 0.13248rem;
              font-weight: 500;
        .imgarr__wrap 
          width 100%
          display flex
          .imgarr__left 
            width 100%
            margin-right 0.088182rem
            .imgarr__left__top 
              width 100%
              margin-bottom 0.088182rem
              border-radius 0.04rem
              img 
                width 100%            
            .imgarr__left__bottom 
              width 100%
              border-radius 0.04rem
              img 
                width 100%
                height 100%
          .imgarr__right 
            width 100%
            display flex
            flex-direction column
            justify-content space-between
            .imgarr__right__box 
              width 100%
              img 
                width 100%
        .content
            border-radius .04rem
            .guidance-hart
                width 100%
                border-top-left-radius .04rem
                border-top-right-radius .04rem
                img
                    width 100%
            .detail-box
                border-bottom-left-radius .04rem
                border-bottom-right-radius .04rem
                width 100%
                display flex
                flex-direction row
                justify-content space-between
                padding .1104rem .1102rem
                .detail-img
                    width 23.3%
                    height 30%
                    img 
                      width 100%
                   
        
  
</style>
<style lang='stylus'>
  .van-swipe 
    width 100%
    height 27.82% 
    .van-swipe__track
      width 100%
      height 100%
      .van-swipe-item 
        width 100% 
        height 100%          
        img 
          width 100%
          height 100%
</style>